<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<head>
<body>
<head>
<style>
div.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border:2px solid #4CAF50;
}
</style>
</head>
<body>
    p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>

<div class="sticky">我是有粘性的！</div>

<div style="padding-bottom:2000px">
  <p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p>
  <p>向上滚动以消除粘性。</p>
  <p>一些启用滚动的文本... </p>
  <p>一些启用滚动的文本.... </p>
</div>
</body>
</html>